<template>
	<view class="container">
		<view class="swiper-box">
			<view class="action-bar h-flex-x">
				<view class="h-flex-x" @tap="close()">
					<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
					<text style="padding-left: 10rpx;font-weight: bold;">{{ topicIndex + 1 }}</text>
					<text style="color: #999;padding: 0 5rpx;">/</text>
					<text style="color: #999;">{{ dataList.length }}</text>
				</view>
			</view>
			
			<swiper class="swiper" :duration="duration" :current="swiperIndex" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="topic-content" style="position: relative;">
								<view class="" style="width: 120rpx;height: 120rpx;border-radius: 50%;position: absolute;
								top: 20rpx;right: 50rpx;">
									<image style="width: 120rpx;" v-if="item.answerResult && item.answer == item.answerResult"  src="../../../static/222.png" mode="widthFix"></image>
									<image style="width: 120rpx;" v-else src="../../../static/111.png" mode="widthFix"></image>
								</view>
								<text style="padding-right: 20rpx;">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style="display: flex;align-items: center;">
									
									<uv-parse :nodes="item.questionStemExtJson.testQuestionsContent"></uv-parse>
								</view>
								<view class="answer-sheet">
									<view
										class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.questionStemExtJson.testQuestionOptions"
										:key="sheetIndex"
									>
										<view
											v-if="item.questionType == 0"
											style="display: flex;justify-content: center;align-items: center;"
											class="icon h-flex-x h-flex-center"
											:style="{ border: sheetItem.answerResult == sheetItem.optionsName ? '1rpx solid #0089ff' : '1rpx solid #f5f5f5' }"
										>
											<view
												style="width: 20rpx;height: 20rpx;border-radius: 10rpx;"
												:style="{ background: sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#f5f5f5' }"
											></view>
										</view>
										<view v-if="item.questionType == 0" :style="{ color: sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333' }">
											{{ sheetItem.optionsName }}
										</view>

										<view
											v-if="item.questionType !== 0"
											class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerResult == sheetItem.optionsName }"
										>
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view v-if="item.questionType !== 0" :style="{ color: sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333' }">
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" >
									<text>答案</text>
									<text style="color: #0089ff;font-weight: bold;padding: 0 20rpx;">{{ item.answer }}</text>
									<text style="padding-right: 20rpx;">您选择</text>
										
									<text style="color: #0089ff;font-weight: bold;" v-if="item.answerResult == item.answer">{{ item.answerResult }}</text>
									<text style="color: #f84d27;font-weight: bold;" v-else>{{ item.answerResult }}</text>
									<text style="color: #f84d27;font-weight: bold;" v-if="!item.answerResult">未作答</text>
										<!-- <view class=""  v-else>
											<text style="color: #f84d27;font-weight: bold;">未作答</text>
										</view> -->
									
									
									
								</view>
								<view class="answer-doubt">
									<text style="font-weight: bold;">题目解析：</text>
									<uv-parse :nodes="item.questionAnalysisExtJson"></uv-parse>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons';

import { getPracticeTestQuestionsByquestionBankList, insertPlugsPracticeStudentTestRecordDetails } from '../../../utils/api.js';
export default {
	components: { uniIcons },
	data() {
		return {
			dataList: [], // 数据源
			swiperList: [], // 轮播图数据列表
			swiperIndex: 0, // 轮播图当前位置
			isChange: false, // 是否切换
			topicIndex: 0, // 题目位置
			duration: 200, // 动画过渡时长
			showPopup: false,
			info: {},
			show: false,
			typeId: 0,
			practiceId: 0
		};
	},
	
	filters: {
		topicType(type) {
			if (type == 0) {
				return '判断题';
			}
			if (type == 1) {
				return '单选题';
			}
			if (type == 2) {
				return '多选题';
			}

			return '';
		}
	},
	onLoad(option) {
		this.info = JSON.parse(decodeURIComponent(option.dataList));
		let indexId = Number(option.indexId);
		console.log(indexId,'indexId');
		this.getDataList();
		this.pickerTopic(indexId)
	},
	methods: {
		
		getDataList() {
			// let data = {
			// 	questionBankId: this.info.id,
			// 	userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
			// };
			// getPracticeTestQuestionsByquestionBankList(data).then(res => {
			// 	if (res.code == 200) {
					this.dataList = this.info;
					this.dataList.forEach(item => {
						item.answer = [];
						item.list = [];
						item.questionStemExtJson.testQuestionOptions.forEach(result => {
							if (result.answerStatus == 1) {
								item.answer.push(result.optionsName);
							}
						});
					});
					console.log(this.dataList,98+5315642);
					// this.renderSwiper(5);
			// 	}
			// });
		},
		
		// 渲染 swiper
		renderSwiper(index) {
			console.log(this.dataList);
			console.log(index, '');
			let list = [];
			let current = 1;
			console.log(this.dataList[1 - 1], 555);
			if (this.dataList[index - 1]) {
				console.log(this.dataList[index - 1], 666);
				list.push(this.dataList[index - 1]);
			} else {
				current = 0;
			}
			console.log(list, 1);
			list.push(this.dataList[index]);
			console.log(list, 2);
			if (this.dataList[index + 1]) {
				list.push(this.dataList[index + 1]);
			}

			this.duration = 0;

			setTimeout(() => {
				this.swiperList = list;
				console.log(this.swiperList, 999);
				this.swiperIndex = current;

				setTimeout(() => {
					this.duration = 200;
				}, 100);
			}, 50);
		},
		// 轮播图切换
		onChange(e) {
			// 非触摸事件不做轮播图状态更新
			if (e.detail.source != 'touch') return;

			// 标识已切换
			this.isChange = true;
			// 轮播图当前位置大于原来时则表示为下一题
			if (e.detail.current > this.swiperIndex) {
				this.topicIndex++;
			} else {
				// 轮播图当前位置小于原来时则表示为上一题
				this.topicIndex--;
			}

			// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
			this.swiperIndex = e.detail.current;
		},
		// 轮播图动画结束
		onAnimationfinish(e) {
			if (!this.isChange) return;

			this.isChange = false;
			setTimeout(() => {
				this.renderSwiper(this.topicIndex);
			}, 10);
		},
		// 选择题目
		pickerTopic(index) {
			this.topicIndex = index;
			this.renderSwiper(index);
		},
		// 监听答题
		
		submitResult(item) {
			console.log(this.swiperList[this.swiperIndex]);
			console.log(item);
			if (this.typeId == 0) {
				this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
				console.log(this.swiperList[this.swiperIndex].answerResult == this.swiperList[this.swiperIndex].answer);
				// let postData = {
				// 	adminId: uni.getStorageSync('userInfo').adminId || 47,
				// 	userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
				// 	answerStatus:this.swiperList[this.swiperIndex].answerResult == this.swiperList[this.swiperIndex].answer?0:1,
				// 	practiceId: this.practiceId,
				// 	testQuestionsId: this.swiperList[this.swiperIndex].id,
				// 	userAnswer: this.swiperList[this.swiperIndex].answer.join(),
				// 	userId: uni.getStorageSync('userInfo').id,
				// };
				
				// console.log(postData,78979879);
				// insertPlugsPracticeStudentTestRecordDetails(postData).then(res=>{
				// 	if(res.code==200){
				// 		console.log(123);
				// 	}
				// });
				
				
			} else {
				this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
				let pickerIndex = this.topicIndex + 1;
				console.log(pickerIndex, this.dataList.length);
				if (pickerIndex < this.dataList.length) {
					this.pickerTopic(pickerIndex);
				}
			}
		},
		// 清除自动跳到下一页延时器
		clearAutoNextTopicTime() {
			clearTimeout(this.autoNextTopicTime);
		},
		// 添加收藏
		addFavorite() {
			let favorite = this.dataList[this.topicIndex].favorite;
			this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
		}
	}
};
</script>

<style lang="scss">
@import 'lib/helang-flex.scss';

page {
	height: 100%;
}
.actives {
	color: red;
}
.actives1 {
	color: #fff;
}
// 容器
.container {
	height: 100%;
	background-color: #fff;
	position: relative;
	color: #333;
	font-size: 28rpx;
}
// 轮播盒子
.swiper-box {
	position: absolute;
	top: 0rpx;
	left: 0;
	right: 0;
	bottom: 100rpx;
	height: auto;
	width: auto;
	z-index: 1;
}
.action-bar {
	height: 100rpx;
	width: 100%;
	box-sizing: border-box;
	border-bottom: #ddd solid 1px;
	font-size: 28rpx;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	.success-num {
		color: #0089ff;
	}
	.error-num {
		color: #f84d27;
	}
}

.topic-list {
	height: 600rpx;

	.list-box {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		color: #666;

		.list-item {
			padding-bottom: 20rpx;

			> view {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				border: #ddd solid 1px;
				border-radius: 50%;
				margin: 0 auto;

				&.active {
					border: #0089ff solid 1px;
				}

				&.success {
					background-color: #dbf2ff;
					color: #0089ff;
					border: none;

					&.active {
						border: #0089ff solid 1px;
					}
				}
				&.success1 {
					background-color: #0089ff;
					color: #fff;
					border: none;
				}

				&.error {
					background-color: #ffeceb;
					color: #f84d27;
					border: none;

					&.active {
						border: #f84d27 solid 1px;
					}
				}
				&.error1 {
					background-color: red;
					color: #fff;
					border: none;
				}
			}
		}
	}
}
.swiper {
	height: 100%;

	.swiper-scroll {
		height: 100%;
	}

	.swiper-item {
		background-color: #fff;
		box-sizing: border-box;
		height: 100%;

		.topic-content {
			padding: 30rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 1.6;
			image{
				width: 660rpx !important;
			}
			// 题目类型标签
			.type-label {
				background-color: #0089ff;
				color: #fff;
				border-radius: 6rpx;
				padding: 4rpx 10rpx;
				font-size: 24rpx;
			}

			// 答题卡
			.answer-sheet {
				margin: 40rpx -30rpx;
				padding: 20rpx;
				.item {
					padding: 20rpx 30rpx;
					background-color: #f5f5f5;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					&:active {
						background-color: #f3f3f3;
					}

					+ .item {
						margin-top: 0;
					}

					.icon {
						margin-right: 20rpx;
						box-shadow: 0 0 5px #999;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						font-size: 26rpx;

						&.success {
							background-color: #0089ff;
							color: #fff;
						}

						&.error {
							background-color: #f84d27;
						}
					}
				}
			}

			// 答题结果
			.answer-result {
				background-color: #f3f3f3;
				border-radius: 8rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
			}

			// 题目解析
			.answer-doubt {
				font-size: 28rpx;
				color: #8a6d3b;
				background-color: #fcf8e3;
				border: #faebcc solid 1px;
				margin-top: 40rpx;
				padding: 20rpx 30rpx;
				border-radius: 8rpx;
				word-break: break-all;
				image{
				  width:620rpx !important;
				}
			}
		}
	}
}

// 底部面板
.panel-bottom {
	position: absolute;
	left: 0;
	// bottom: 0;
	// top: 100rpx;
	height: auto;
	width: 100%;
	z-index: 2;

	// 遮罩
	.shade {
		position: fixed;
		z-index: 9;
		background-color: rgba(33, 33, 33, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// 内容
	.content {
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
	}

	// 操作栏
	.action-bar {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: #ddd solid 1px;
		font-size: 28rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		.success-num {
			color: #0089ff;
		}

		.error-num {
			color: #f84d27;
		}
	}

	// 题目列表
	.topic-list {
		height: 600rpx;

		.list-box {
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			color: #666;

			.list-item {
				padding-bottom: 20rpx;

				> view {
					width: 80rpx;
					height: 80rpx;
					background-color: #fff;
					border: #ddd solid 1px;
					border-radius: 50%;
					margin: 0 auto;

					&.active {
						border: #0089ff solid 1px;
					}

					&.success {
						background-color: #dbf2ff;
						color: #0089ff;
						border: none;

						&.active {
							border: #0089ff solid 1px;
						}
					}

					&.error {
						background-color: #ffeceb;
						color: #f84d27;
						border: none;

						&.active {
							border: #f84d27 solid 1px;
						}
					}
				}
			}
		}
	}
}
</style>
